<template>
  <div class='container'>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="900px" :before-close="handleClose">
      <el-row>
        <el-col :span="6">【题型】：
          <span v-if="rowData.questionType==='1'">单选题</span>
          <span v-if="rowData.questionType==='2'">多选题</span>
          <span v-if="rowData.questionType==='3'">简答题</span>
        </el-col>
        <el-col :span="6">【编号】：{{rowData.id}}</el-col>
        <el-col :span="6">【难度】：
          <span v-if="rowData.difficulty==='1'">简单</span>
          <span v-if="rowData.difficulty==='2'">一般</span>
          <span v-if="rowData.difficulty==='3'">困难</span>
        </el-col>
        <el-col :span="6">【标签】：{{rowData.tags}}</el-col>
        <el-col :span="6">【学科】：{{rowData.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{rowData.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{rowData.direction}}</el-col>
      </el-row>
      <hr>
      <div>
        <p>【题干】：</p>
        <p style="color:blue">{{rowData.question}}</p>
        <!-- 单选 -->
        <div v-if="rowData.questionType==='1'">
          <p>单选题 选项：(以下选择的选项为正确答案)</p>
          <div v-for="item in rowData.options" :key="item.id">
            <el-radio-group :value="rowData.isChoice">
              <el-radio :label="item.code">{{item.title}}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 多选 -->
        <div v-else-if="rowData.questionType==='2'">
          <p>多选题 选项：(以下选择的选项为正确答案)</p>
          <div v-for="item in rowData.options" :key="item.id">
            <el-checkbox-group :value="rowData.isChoices">
              <el-checkbox :label="item.code">{{item.title}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <hr>
      <p>【参考答案】：
        <!-- 播放视频按钮 -->
        <el-button type="danger" size="small" @click="video" v-if="rowData.videoURL&&rowData.videoURL.trim().length>0">
          视频答案预览
        </el-button>
        <span v-else>暂无视频解析</span>
      </p>
      <!-- video视频播放 -->
      <div v-if="videoShow&&rowData.videoURL&&rowData.videoURL.trim().length>0">
        <video :src="rowData.videoURL" ref="video" autoplay controls="controls"></video>
      </div>
      <hr>
      <p>【答案解析】：{{rowData.answer}}</p>
      <hr>
      <p>【题目备注】：{{rowData.remarks}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

export default {
  props: ['dialogVisible', 'rowData'],
  data () {
    return {
      videoShow: false
    }
  },
  methods: {
    // 点击对话框取消触发
    downDialog () {
      this.$emit('downDialog')
      this.videoShow = false
    },
    // 对话框关闭回调
    handleClose () {
      this.$emit('downDialog')
      this.videoShow = false
    },
    // 点击按钮播放video
    video () {
      this.videoShow = true
    }
  }
}
</script>

<style scoped lang='less'>
.el-dialog {
  font-size: 12px;
}
.el-col {
  margin: 10px 0;
}
.el-radio,
.el-checkbox {
  margin: 10px 0;
}
video {
  width: 400px;
  height: 300px;
}
</style>
